<template>
	<Container>
		<view class="header">
			<view
				class="article-box"
				v-for="(item, index) in assignment.articles"
				:key="index"
				:style="{
					position: 'absolute',
					top: postionList[item.direction].top,
					left: postionList[item.direction].left,
					width: postionList[item.direction].width,
					height: postionList[item.direction].height
				}"
			>
				<image :src="item.imageUrl" mode="aspectFit"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Record class="record" ref="audio" @recordFinish="recordFinish" :isStart="questionPress" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
		<Question :question="assignment.questionName"/>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	data() {
		return {
			postionList: {
				top: {
					height: '50%',
					width: '100%',
					top: 0,
					left: 0
				},
				bottom: {
					height: '50%',
					width: '100%',
					top: '50%',
					left: 0
				},
				left: {
					height: '100%',
					width: '50%',
					top: 0,
					left: 0
				},
				right: {
					height: '100%',
					width: '50%',
					top: 0,
					left: '50%'
				}
			}
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Record },
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 100%
	overflow hidden
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	transform translate3d(0, 0, 0)
	position relative
	margin 5vh 0
	.article-box
		position absolute
		display flex
		align-items center
		justify-content center
		image
			width 85%
			height 85%
</style>
